<template>
	<view class="container">
		<view class="search-box">
			<u-search v-model="params.keywords" placeholder="搜索农户姓名或手机号" bgColor="#ffffff" :showAction="false" height="62rpx"
				searchIconColor="#FFC046" :inputStyle="{fontSize:'30rpx'}" @search="onRefreshData"></u-search>
		</view>

		<view class="record-list">
			<view class="record-item" v-for="(item,i) in netList" :key="i" @click="goDetail(item.id)">
				<!-- <view class="record-time">2016-01-06</view> -->
				<!-- <view class="child-list"> -->
				<view class="record-info">
					<view class="info-top f-c-between">
						<view class="time">{{item.createtime_text}}</view>
						<view class="detail">详情</view>
					</view>
					<view class="info-row f-c-between">
						<view class="info-label">
							收姜商户<view class="value ellipsis1">{{userInfo.nickname}}</view>
						</view>
						<view class="info-label">
							卖姜农户<view class="value ellipsis1">{{item.seller}}</view>
						</view>
						<view class="info-label">
							约定单价<view class="value">{{item.unit_price}}</view>
						</view>
					</view>
					<view class="info-row f-c-between">
						<view class="info-label">
							过磅重量<view class="value">{{item.weight_num}}</view>
						</view>
						<view class="info-label">
							过磅费用<view class="value">{{item.fee}}</view>
						</view>
						<view class="info-label">
							回皮重量<view class="value">{{item.tare}}</view>
						</view>
					</view>
				</view>
				<!-- </view> -->
			</view>
			<u-loadmore line :status="loadStatus" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				netList: [],
				params: {
					keywords: '',
					page: 1,
					limit: 15,
					total: 0
				}
			}
		},
		computed: {
			loadStatus() {
				if (this.netList.length == 0) return ""
				if (this.netList.length < this.params.total) return 'loadmore'
				if (this.netList.length == this.params.total) return "nomore"
			}
		},
		onLoad() {
			this.getWeightList()
		},
		methods: {
			//获取过磅列表信息
			getWeightList() {
				this.$api.get_wight_list(this.params).then(res => {
					if (res) {
						let {
							list,
							total
						} = res
						this.netList = this.netList.concat(list || [])
						this.params.total = total
					}
				})
			},

			//重置数据
			async onRefreshData() {
				this.params.page = 1
				this.netList = []
				await this.getWeightList()
			},

			//跳转详情
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/weigh/detail?id=' + id
				})
			}
		},
		onPullDownRefresh() {
			this.onRefreshData()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.netList.length == this.params.total) {
				return
			}
			this.params.page++
			this.getWeightList()
		}
	}
</script>

<style>
	page {
		background-color: #F4F5F7;
	}
</style>
<style scoped lang="scss">
	.container {
		height: 100%;
		position: relative;
		// display: flex;
		// flex-direction: column;
		// overflow: hidden;

		.search-box {
			padding: 24rpx 30rpx 24rpx;
			background-color: #F4F5F7;
			width: 100%;
			position: fixed;
			top: var(--window-top);
			left: 0;
			z-index: 999;
		}

		.record-list {
			flex: 1;
			overflow-y: scroll;
			padding: 0 16rpx 16rpx;
			padding-top: 116rpx;

			.record-item {
				margin-bottom: 20rpx;

				.record-time {
					font-weight: 600;
					font-size: 24rpx;
					color: #333333;
					padding: 0 16rpx 14rpx;
				}

				.child-list {}

				.record-info {
					padding: 16rpx 24rpx;
					background: #FFFFFF;
					border-radius: 12rpx;
					margin-top: 20rpx;

					&:first-child {
						margin-top: 0rpx;
					}

					.info-top {
						.time {
							font-weight: 400;
							// font-size: 24rpx;
							font-size: calc(24rpx * 1.4);
							color: #3C3832;
						}

						.detail {
							font-weight: 400;
							// font-size: 24rpx;
							font-size: calc(24rpx * 1.4);
							color: #FF5656;
						}
					}

					.info-row {
						margin-top: 14rpx;

						.info-label {
							width: 33.3%;
							font-weight: 400;
							font-size: 24rpx;
							color: #3C3832;
							display: flex;

							.value {
								color: #FFC046;
								margin-left: 20rpx;
								flex: 1;
							}
						}
					}
				}
			}
		}
	}
</style>